import React, { Fragment, useState } from 'react';
import { Card, Content } from 'react-fule-ui';
import ReactFlow, {
  removeElements,
  addEdge,
  MiniMap,
  Controls,
  Background,
} from 'react-flow-renderer';
import { initialElements } from './initial-elements';
import './index.scss';

const onLoad = (reactFlowInstance) => {
  console.log('flow loaded:', reactFlowInstance);
  reactFlowInstance.fitView();
};

export default function PluginsFlow() {
  const [elements, setElements] = useState(initialElements);
  const onElementsRemove = (elementsToRemove) =>
    setElements((els) => removeElements(elementsToRemove, els));
  const onConnect = (params) => setElements((els) => addEdge(params, els));
  return (
    <Fragment>
      <Content>
        <Content.Header>流程</Content.Header>
        <Content.Body full>
          <Card className="fule-flow">
            <ReactFlow
              elements={elements}
              onElementsRemove={onElementsRemove}
              onConnect={onConnect}
              onLoad={onLoad}
              snapToGrid={true}
              snapGrid={[15, 15]}
            >
              <MiniMap
                nodeStrokeColor={(n) => {
                  if (n.style?.background) return n.style.background;
                  if (n.type === 'input') return '#0041d0';
                  if (n.type === 'output') return '#ff0072';
                  if (n.type === 'default') return '#1a192b';

                  return '#eee';
                }}
                nodeColor={(n) => {
                  if (n.style?.background) return n.style.background;

                  return '#fff';
                }}
                nodeBorderRadius={2}
              />
              <Controls />
              <Background color="#aaa" gap={16} />
            </ReactFlow>
          </Card>
        </Content.Body>
      </Content>
    </Fragment>
  );
}
